<template>
  <div id="main" >
      <div id="header">
            <h1 onselectstart="return false" style="cursor: default;font-weight:800;font-size:40px">健 身 会 所 管 理 系 统</h1>
            <p> &nbsp;</p>
			<div id="particles" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
        </div>
        <div style="margin-left:50%;">
             <el-form ref="registerForm" :model="registerForm"  label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="registerForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号" maxlength="11"
            show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="name" >
            <el-input v-model="registerForm.password" show-password ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="registerForm.sex" placeholder="请选择性别" >
                <el-option
                label="男"
                value="0">
                </el-option>
                <el-option
                label="女"
                value="1">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birthday" >
            <el-date-picker
              v-model="registerForm.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-top:30px">
            <el-button @click="onRegister('registerForm')">注册</el-button>
            <el-button @click="goLoginPage">取消</el-button>
          </el-form-item>
      </el-form>
        </div>
     
  </div>
</template>

<script>
import webservice from '../../utils/webservice'
export default {
    data(){
        return{
            registerForm:{}, //用户注册时填写的内容
            accountNumber:'',//获取到的账号
            
        }
    },
    created(){
        
    },
    mounted(){
        
    },
    methods:{
        //注册
         onRegister(formName){
             this.$refs[formName].validate((valid)=>{
                 if(valid){
                    let params ={
                    phone:this.registerForm.phone,
                    password:this.registerForm.password,
                    name:this.registerForm.name,
                    sex:this.registerForm.sex,
                    balance:this.registerForm.balance,
                    salary:this.registerForm.salary,
                    birthday:this.registerForm.birthday,
                }
                const _params = JSON.stringify(params)
                webservice.HttpPost(
                    "/api/user/register",_params,
                    (data) => {
                    if (data.code === 200) {
                        this.$message.success({
                            message: '注册成功,请前往登录页进行登录',
                            showClose: true,
                            duration: 6000,
                        });
                        this.$router.push('/login')
                    }else{
                        this.$message.error({
                            message: data.message,
                            showClose: true,
                            duration: 1000,
                        });
                    }
                    }
            );
                 }
             })
            
        },
        //返回登录页
        goLoginPage(){
            this.$router.push('/login')
        }
    }
}
</script>

<style scoped>
    /* .el-input /deep/.el-input__inner{
        width: 80%!important;
    } */
    #main {
    position: relative;
    min-height: 100%;
    background-image: url(../../assets/body-bg.jpg);
     background-repeat: no-repeat;   
    background-size: cover;
}
    .el-input{
    width:50%;
    }
    .el-select{
    width:50%;
    }
</style>